<template>
  <el-dialog title="分配角色" :visible="showRoleDialog" @close="btnCancel">
    <!-- el-checkbox-group选中的是 当前用户所拥有的角色  需要绑定 当前用户拥有的角色-->
    <el-checkbox-group v-model="roleIds">
      <el-checkbox v-for="item in list" :key="item.id" :label="item.id">
        {{ item.name }}
      </el-checkbox>
      <!-- 选项 -->
    </el-checkbox-group>
    <el-row slot="footer" type="flex" justify="center">
      <el-col :span="6">
        <el-button type="primary" size="small" @click="btnOK">确定</el-button>
        <el-button size="small" @click="btnCancel">取消</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
  import { getRoleList} from '@/api/setting'
  import { getUserDetailById} from '@/api/user'
  import { assignRoles } from '@/api/employees'

  export default {
    props: {
      showRoleDialog: {
        type: Boolean,
        default: false
      },
      // 用户的id 用来查询当前用户的角色信息
      userId: {
        type: String,
        default: null
      }
    },
    data(){
      return {
        list:[], // 角色列表
        roleIds:[] // 用户拥有的角色的id
      }
    },
    created() {
      this.getRoleList()
    },
    methods:{
      // 获取所有角色
      async getRoleList(){
        const { rows } = await getRoleList()
        this.list = rows
      },
      async getUserDetailById(id){
        const { roleIds } = await getUserDetailById(id)
        this.roleIds = roleIds // 赋值本用户的角色
      },
      async btnOK(){
        await assignRoles({id : this.userId , roleIds : this.roleIds})
        // 关闭窗体
        this.$emit('update:showRoleDialog', false)
      },
      btnCancel() {
        this.roleIds = [] // 清空原来的数组
        this.$emit('update:showRoleDialog', false)
      }
    }
  }
</script>

